import React, { FC } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import { useModel } from 'umi';
import ToolBar from './components/Toolbar';
import ModalContent from './components/Modal';
import useHoxModel from '@/pages/Users/useHoxModel';
import useAuthorityHoxModel from '@/pages/Authority/useHoxModel';
import { modelName } from '@/pages/Users';
import { useUpdateEffect } from 'ahooks';
import { Modal } from 'antd';
import ConfirmProps from '@/components/CommonModal/Confirm';
import { AddUserTypeReturnType } from '../../API';
import DropdownMenu from '@/components/DropdownMenu';

const { confirm } = Modal;

//定义setTimeout返回类型
// type TimerHandle = ReturnType<typeof setTimeout>;

interface CardProps {
  actionRef: React.MutableRefObject<ActionType | undefined>;
}

const BlankCard: FC<CardProps> = ({ actionRef }) => {
  const {
    getUserList,
    getUserInfo,
    currentCode,
    // selectedKeys,
    dispatch,
    deleteUser,
    getCardList,
  } = useHoxModel((model) => [model.getUserList, model.selectedKeys, model.currentCode]);
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  const { getDoorListByUser, setFormList } = useAuthorityHoxModel((model) => []);

  useUpdateEffect(() => {
    actionRef.current?.reloadAndRest();
  }, [currentCode]);

  const columns: ProColumns<AddUserTypeReturnType>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      valueType: 'index',
      width: '10%',
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      align: 'center',
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '手机',
      align: 'center',
      dataIndex: 'phone',
    },
    {
      title: '身份证',
      align: 'center',
      dataIndex: 'idCard',
    },
    {
      title: '操作',
      key: 'option',
      width: '10%',
      valueType: 'option',
      render: (_, record, index) => [
        <DropdownMenu<AddUserTypeReturnType>
          key={index.toString(36) + index}
          record={record}
          typeProps={[
            {
              key: 'openCard',
              name: '用户开卡',
              icon: 'iconkaika',
              onClick: (record: AddUserTypeReturnType) => {
                dispatch({ info: record });
                getCardList({ status: 0 }); //获取空白卡列表
                showModal(modelName + 'open-card');
              },
            },
            {
              key: 'edit',
              name: '编辑',
              icon: 'iconguanbi',
              onClick: (record: AddUserTypeReturnType) => {
                getUserInfo({ id: Number(record['id']) });
                showModal(modelName + 'edit');
              },
            },
            {
              key: 'permissionsConfig',
              name: '权限配置',
              icon: 'iconquanxianpeizhi',
              onClick: (record: AddUserTypeReturnType) => {
                dispatch({ info: record });
                setFormList(record?.areas || []);
                getDoorListByUser({ id: record.id });
                showModal(modelName + 'permissionsConfig');
              },
            },
            {
              key: 'permissionsDetail',
              name: '权限详情',
              icon: 'iconquanxianxiangqing',
              onClick: (record: AddUserTypeReturnType) => {
                dispatch({ info: record });
                showModal(modelName + 'detail');
              },
            },
            {
              key: 'delete',
              name: '删除',
              icon: 'iconshanchu1',
              onClick: (record: AddUserTypeReturnType) => {
                confirm({
                  ...new ConfirmProps(),
                  async onOk() {
                    let res = await deleteUser({ id: Number(record['id']) });
                    if (res.result === 0) {
                      actionRef.current?.reloadAndRest();
                    }
                  },
                });
              },
            },
          ]}
        />,
      ],
    },
  ];

  return (
    <div className={styles['container']}>
      <ProTable<AddUserTypeReturnType>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          const data = await (currentCode &&
            getUserList({
              keyword: params.keyword || undefined,
              number: params.pageSize,
              page: params.current,
              code: currentCode,
            }));
          return await {
            data: (currentCode && data?.list) || [],
            success: true,
            total: (currentCode && data?.count) || 0,
          };
        }}
        rowKey="id"
        // rowSelection={{
        //   selectedRowKeys,
        //   onChange: (selectedRowKeys) => {
        //     dispatch({ selectedRowKeys });
        //   },
        // }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        search={false}
        options={{
          search: {
            name: 'keyword',
          },
        }}
        toolBarRender={() => [<ToolBar actionRef={actionRef} />]}
      />
      <ModalContent actionRef={actionRef} />
    </div>
  );
};
export default BlankCard;
